<template>
  <div class="w-full min-h-screen relative grid md:grid-cols-2 gap-8">
    <pre
      class="leading-[0.8rem] text-[0.5rem] md:leading-[1.2rem] md:text-[1rem] pl-3 font-mono whitespace-pre text-bsr col-span-1"
    >


        ´´´´´´´´██´´´´´´´
        ´´´´´´´████´´´´´´
        ´´´´´████████´´´´  ,------------.
        ´´`´███▒▒▒▒███´´´´<span class="inline-block w-20 md:w-40">( <i class="typewriter">I want you!</i></span>  
        ´´´███▒●▒▒●▒██´´´  `------------´
        ´´´███▒▒▒▒▒▒██´ _. -'
        ´´´███▒▒▒▒██´             
        ´´██████▒▒███´´´´´        
        ´██████▒▒▒▒███´´        
        ██████▒▒▒▒▒▒███´´´´       
        ´´▓▓▓▓▓▓▓▓▓▓▓▓▓▒´´        
        ´´▒▒▒▒▓▓▓▓▓▓▓▓▓▒´´´´´     
        ´.▒▒▒´´▓▓▓▓▓▓▓▓▒´´´´´     
        ´.▒▒´´´´▓▓▓▓▓▓▓▒          
        ..▒▒.´´´´▓▓▓▓▓▓▓▒    
        ´▒▒▒▒▒▒▒▒▒▒▒wwwwwwwwwwww<span class="hidden md:inline-block text-7xl leading-[0px]">👉🏻</span><span class="text-3xl md:hidden">💅</span>
        ´´´´´´´´´███████´´´´´     
        ´´´´´´´´████████´´´´´´´
        ´´´´´´´█████████´´´´´´   
        ´´´´´´██████████´´´´     
        ´´´´´´██████████´´´           
        ´´´´´´´█████████´´
        ´´´´´´´█████████´´´
        ´´´´´´´´████████´´´´´
        ________▒▒▒▒▒
        _________▒▒▒▒
        _________▒▒▒▒
        ________▒▒_▒▒
        _______▒▒__▒▒
        _____ ▒▒___▒▒
        _____▒▒___▒▒
        ____▒▒____▒▒
        ___▒▒_____▒▒
        ███____ ▒▒
        ████____███
        █ _███_ _█_███
        ██_███_███_███
        
<div class="md:hidden px-4">
<span class="md:hidden text-xs">项目名：mysite-nuxt</span>
<span class="md:hidden text-xs">语言： vue</span>
<span class="md:hidden text-xs">框架： nuxtjs+daisyui+pinia</span>
<span class="md:hidden text-xs">动画库： animejs</span>
<span class="md:hidden text-xs">构建工具： vite</span>
<span class="md:hidden text-xs">版本控制： git-github</span>
<span class="md:hidden text-xs">css预处理: tailwindcss</span>
<span class="md:hidden text-xs">数据库:  mongodb</span>
<span class="md:hidden text-xs">服务器端: uniCloud</span>
<span class="md:hidden text-xs">author: fangq</span>
<span class="md:hidden text-xs break-words whitespace-normal">大部分人都在关注你飞的高不高，却没人在乎你飞的累不累，这就是现实！</span>
<span class="md:hidden text-xs">我从不相信梦想，我，只，相，信，自，己！</span>
</div>
</pre>

    <pre class="hidden mt-20 md:block text-bsr">
<span class="hidden md:inline-block text-2xl">项目名：mysite-nuxt</span>
<span class="hidden md:inline-block text-2xl">语言： vue</span>
<span class="hidden md:inline-block text-2xl">框架： nuxtjs+daisyui+pinia</span>
<span class="hidden md:inline-block text-2xl">动画库： animejs</span>
<span class="hidden md:inline-block text-2xl">构建工具： vite</span>
<span class="hidden md:inline-block text-2xl">版本控制： git-github</span>
<span class="hidden md:inline-block text-2xl">css预处理: tailwindcss</span>
<span class="hidden md:inline-block text-2xl">数据库:  mongodb</span>
<span class="hidden md:inline-block text-2xl">服务器端:  uniCloud</span>
<span class="hidden md:inline-block text-2xl">author: fangq </span>
<span class="hidden md:inline-block text-xs break-words whitespace-normal">大部分人都在关注你飞的高不高，却没人在乎你飞的累不累，这就是现实！</span>
<span class="hidden md:inline-block text-xs">我从不相信梦想，我，只，相，信，自，己！</span>
</pre>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.pre1 {
  line-height: 1.2rem;
  font-size: 1rem;
}
.typewriter {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-right: 0.15em solid var(--color-bsr);
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.15em;
  animation: typing 3s steps(12, end) infinite,
    blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: var(--color-bsr);
  }
}
</style>
